<template>
	<div class="music-setting">
		<div class="title">点歌姬设置</div>
		<el-form label-position="top" :model="settingForm">
			<el-form-item label="默认歌单" class="input">
				<span slot="label"
					>默认歌单
					<el-tooltip
						class="item"
						effect="dark"
						content="多个歌单id用,隔开，如果歌单需要登录才能播放，会自动移除！"
						placement="top"
					>
						<i class="el-icon-info"></i></el-tooltip
				></span>
				<el-input
					placeholder="没有点歌时默认播放的歌单id"
					v-model="settingForm.songListId"
				></el-input>
			</el-form-item>
			<el-form-item label="切歌人数">
				<span slot="label"
					>切歌人数
					<el-tooltip
						class="item"
						effect="dark"
						content='直播间发送"切歌"关键字，达到指定人数，可以切换到下一首歌！'
						placement="top"
					>
						<i class="el-icon-info"></i></el-tooltip
				></span>
				<el-input-number
					v-model="settingForm.num"
					@change="counterChange"
					:min="1"
				>
				</el-input-number>
			</el-form-item>
			<el-form-item class="btn">
				<el-button type="primary" @click="changeSongListId">
					保存
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	data() {
		return {
			settingForm: {
				// 计数器num
				num: localStorage.getItem("switchMusicNum") || 3,
				// 默认歌单id
				songListId: localStorage.getItem("songListId") || 3778678,
			},
		};
	},
	mounted() {
		// 当歌单没权限查看时
		this.$electron.remote.ipcMain.on("deleteSomeSongListId", (e, val) => {
			this.settingForm.songListId = val;
			localStorage.setItem("songListId", val);
		});
	},
	methods: {
		// 计数器发生变化
		counterChange(val) {
			this.$electron.ipcRenderer.send("switchMusicNum", val);
			localStorage.setItem("switchMusicNum", val);
		},

		// 设置默认歌单id
		changeSongListId() {
			localStorage.setItem("songListId", this.settingForm.songListId);
		},
	},
};
</script>

<style lang="scss"></style>
